<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    
    <title>蚂蚁统一作战平台</title>
    <meta name="keywords" content="mayioa">
    <meta name="description" content="mayioa">
    <link href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.css" th:href="@{css/style.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ajax/libs/iCheck/custom.css" th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet"/>
    <link href="../static/mayioa/css/mayioa-ui.css" th:href="@{/mayioa/css/mayioa-ui.css?v=1.0.0}" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
</head>

<body class="signin" style="background:#fff;height:100%;overflow-y:hidden;">
    <div class="row" style="padding:10px 8%;">

        <div class="col-sm-12" style="text-align:center;" >
            <h1><img src="../static/mayioa.png"  th:src="@{/mayioa.png}"/></h1>
        </div>
    </div>
    <div class="signinpanel" style="width:100%;margin:4%  0;">
        <div class="row">
            <div class="col-sm-4">
                <!--<h1><img src="../ /iSS_Logo_color.PNG" th:src="@{/iSS_Logo_color.PNG}" /></h1>-->
                <!--<div class="signin-info">-->
                    <!--<div class="logopanel m-b">-->
                        <!--<h1><img alt="[ mayioa ]" src="../static/mayioa.png" th:src="@{/mayioa.png}"></h1>-->
                    <!--</div>-->
                    <!--<div class="m-b"></div>-->
                    <!--<h4>欢迎使用 <strong>mayioa 后台管理系统</strong></h4>-->
                    <!--<ul class="m-b">-->
                        <!--<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li>-->
                        <!--<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li>-->
                        <!--<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Shiro</li>-->
                        <!--<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li>-->
                        <!--<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li>-->
                    <!--</ul>-->
                    <!--<strong>还没有账号？ <a href="#">立即注册&raquo;</a></strong>-->
                <!--</div>-->
            </div>
            <div id="formDiv" class="col-sm-4"  style="text-align:center;z-index:9;">
                <form id="signupForm" style="background:rgba(255,255,255,.75);border:1px solid #bbb;width:460px;">
                    <h2 class="no-margins" style="color:#000;">登录 蚂蚁统一作战平台</h2>
                    <input type="text"     name="username" class="form-control uname"  style="margin-top:40px;"    placeholder="用户名" value=""    />
                    <input type="password" name="password" class="form-control pword m-b"  style="margin-top:40px;" placeholder="密码"   value="" />
					<div class="row" th:if="${captchaEnabled==true}"  style="margin-top:40px;">
						<div class="col-xs-6">
						    <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5">
						</div>
						<div class="col-xs-6">
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="180px;height:50px;"/>
							</a>
						</div>
					</div>
                    <!-- <input class="i-checks"   type="checkbox" name="rememberme"/>&nbsp;&nbsp;<span  style="display:inline-block;margin-top:40px;color:#000;">记住用户名</span>
                     --><button class="btn btn-success btn-block"  style="margin-top:40px;" id="btnSubmit" data-loading="正在验证登录，请稍后...">登录</button>
                </form>
            </div>
            <div class="col-sm-4"></div>
        </div>
        <!--<div class="signup-footer" style="position:fixed;bottom:0.5%;">-->
            <!--<div class="pull-left">-->
                <!--&copy; 2018 All Rights Reserved. mayisoftware <br>-->
                <!--<a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">粤ICP备18046899号</a><br>-->
            <!--</div>-->
        <!--</div>-->
        <div class="row">
            <div class="col-sm-12" id="echartBackground" style="height:200px;width:100%;margin-top:-250px;"></div>
        </div>
    </div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/iCheck/icheck.min.js" th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<!-- <script src="http://tajs.qq.com/stats?sId=62048022"></script> -->
<script src="../static/mayioa/js/mayioa-ui.js" th:src="@{/mayioa/js/mayioa-ui.js?v=1.0.0}"></script>
<script src="../static/mayioa/login.js" th:src="@{/mayioa/login.js}"></script>
    <script src="../static/js/echarts.common.min.js" th:src="@{/js/echarts.common.min.js}"></script>
    <script>
		$("#signupForm").css("margin-left",($("#formDiv").width()-460)/2);
	
		$(window).resize(function(){
			$("#signupForm").css("margin-left",($("#formDiv").width()-460)/2);
		
		})
        var loadBackgroundEchart=function(){
            var myChart=echarts.init(document.getElementById('echartBackground'));
            var data=[];
            var option={
                title:{
                    text:""
                },
                grid:{
                    top:'0',
                    left:'-120',
                    right:'-120',
                    bottom:'-50',
                    containLabel:true
                },
                xAxis:{
                    type:'category',
                    data:data,
                    axisLine:{
                        show:false
                    },
                    splitLine:{
                        show:false
                    },
                    axisLabel:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    }
                },
                yAxis:{
                    type:'value',
                    boundaryGap:[0,'100%'],
                    splitLine:{
                        show:false
                    },
                    axisLine:{
                        show:false
                    },
                    axisLabel:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    }
                },
                series:[{
                    name:"模拟数据",
                    type:'line',
                    smooth:true,
                    symbolSize:10,
                    hoverAnimation:false,
                    data:data,
                    lineStyle:{
                        normal:{
                            width:1
                        }
                    },
                    itemStyle:{
                        normal:{
                            color:'#1c78c6',
                            opacity:0.5
                        }
                    },
                    areaStyle:{
                        normal:{
                            color:new echarts.graphic.LinearGradient(0,0,0,1,[{
                                offset:0,
                                color:'rgba(255,255,255,0.4)'
                            },{
                                offset:0,
                                color:'rgba(255,255,255,0.35)'
                            }])
                        }
                    },
                }]
            };

            for(var i=0;i<20;i++){
                var value=parseInt(Math.random()*(10-6+1)+6,10);
                data.push(value);
            }

            myChart.setOption(option);
            setInterval(function(){
                var value=parseInt(Math.random()*(10-6+1)+6,10);
                data.shift();
                data.push(value);
                myChart.setOption(option,true);
            },2000);
            window.addEventListener("resize",function(){
                myChart.resize();
            },true);
        };
        loadBackgroundEchart();
    </script>
</body>
</html>
